<template>
    <view>
        <index v-show="selected==0" ref="index"/>
        <redpacket v-show="selected==1" ref="redpacket"/>
        <me v-show="selected==2" ref="me"/>
        <view class="tab-bar" >
          <view v-for="(item,index) in list" :key="index" class="tab-bar-item " :class="{bulge:index==1}"  @click="clickTab(index)">
            <image class="image" :src="selected === index ? item.selectedIconPath : item.iconPath"></image>
            <view :style="{color: selected === index ? '#000' : '#B8B8B8'}" class="tab-bar-view" :class="{aa: index == 1}">{{item.text}}</view>
          </view>
        </view>
    </view>
    
</template>

<script>
    import index from "@/pages/index/index"
    import redpacket from "@/pages/redpacket/redpacket"
    import me from "@/pages/me/me"
	export default {
        components: {index,me,redpacket},
		data() {
			return {
				list: [{
				    text: "首页",
				    iconPath: "../../static/img01/shou1.png",
				    selectedIconPath: "../../static/img01/shou.png"
				  },
				  {
				    pagePath: '/pages/redpacket/redpacket',
				    text: '红包区',
				    iconPath: "../../static/img01/rebpack.png",
				    selectedIconPath: "../../static/img01/rebpack.png"
				  },
				  {
				    pagePath: "/tabbar/my/my",
				    text: "我的",
				    iconPath: "../../static/img01/xiong1.png",
				    selectedIconPath: "../../static/img01/xiong.png"
				  }
				],
                selected: 0
			}
		},
		onLoad({index=0}) {
            this.selected = Number(index) || 0;
		},
        onShow() {
            let index = this.$refs.index;
            let me = this.$refs.me;
            let redpacket = this.$refs.redpacket
            if (index) {
                index.getjuzhangGoods();
            }
            if (me) {
                me.getUserInfo();
            }
            if (redpacket) {
                redpacket.init();
            }
        },
		methods: {
            clickTab(index) {
                if (index >= 1 && !uni.getStorageSync("userInfo")) {
                    uni.showModal({
                        title: "您还未登录",
                        content: "是否跳转到登录页面",
                        success(res) {
                            if (res.confirm) {
                                uni.navigateTo({
                                    url: "/pages/login/login?source=/pages/tabbar/index"
                                })
                            }
                            
                        }
                    })
                } else {
                    this.selected = index;
                }
            }
		}
	}
</script>

<style>
	.tab-bar {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  height: 48px;
	  background: #FFF;
	  display: flex;
	  line-height: 1.2;
	  border-top: 2upx solid #e6e6e6;
	}
	
	.tab-bar-item {
	  flex: 1;
	  text-align: center;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  flex-direction: column;
	}
	.tab-bar-item .image {
	  width: 27px;
	  height: 27px;
	}
	.bulge {
	  background-color: #FFF;
	}
	.bulge .tab-bar-bulge {
	  position: absolute;
	  z-index: -1;
	  top: -10px;
	  width: 80px;
	  height: 80px;
	  border-radius: 50%;
	}
	.bulge .image{
	  position: absolute;
	  width: 62px;
	  height: 52px;
	  top: -30px;
	  padding-top: 10px;
	}
	.aa{
	  position: absolute;
	  top: 29px;
	  font-size:12px !important;
	}
	.tab-bar-item .tab-bar-view {
	  font-size: 10px;
	  margin-top: 2px;
	}
</style>
